<template>
	<view class="docTemplateListActiveContent">
		<commonNavBar title="发布信息"    ></commonNavBar>    
		<view class="centre" v-html="content">
			
		</view>
	</view>
</template>

<script>
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar
		},
		data() {
			return { 
				content:'',
				id: null,
				noticeData: {}
			}
		},
		onLoad(options) { 
			this.initData(options.id);
		}, 
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initData(id){
				const res = await uni.$api.sysNoticeInfo({id})
				this.noticeData = res.data.data;
				
				const date = new Date(Number(this.noticeData.createTime));
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
		
				this.content = `
									<view class="h1">${this.noticeData.noticeTitle}</view>
									<view class="h2">
										<view>${this.noticeData.createBy}</view>
										<view>${year}-${month}-${day}${hours}:${minutes}:${seconds}</view>
									</view>
									<view class="content">${this.noticeData.contentHtml}</view>
								`;
			}
		},
		watch: {
			
		},
	}
</script>

<style lang="scss">
	.docTemplateListActiveContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;
					 
					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}
			}
		}

		.centre {
			margin: 115rpx 0 0 0;
			padding: 50rpx 17.5rpx 0 17.5rpx;
			height: calc(100vh - 165rpx);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
			
			/deep/.h1 {
				text-align: center;
				font-size: 36rpx;
			}
			
			/deep/.h2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				margin: 5% auto;
				width: 100%;
			}
			
			/deep/.content {
				margin: 5% auto 0;
				width: 100%;
				background: none !important;
			}
		
			/deep/p {
				font-size: 30rpx !important;
				background: none !important;
			}
			
			/deep/span {
				font-size: 30rpx !important;
				background: none !important;
			}
			
			/deep/strong {
				font-size: 30rpx !important;
			}
			
			/deep/img {
				width: 100%;
			}
		}
	}
</style>